<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket 聊天室</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* 登录页面 */
        #login {
            background: white;
            border-radius: 20px;
            padding: 40px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            width: 400px;
            animation: fadeIn 0.5s;
        }

        #login h1 {
            text-align: center;
            color: #667eea;
            margin-bottom: 30px;
            font-size: 28px;
        }

        #login input {
            width: 100%;
            padding: 15px;
            margin-bottom: 15px;
            border: 2px solid #e0e0e0;
            border-radius: 10px;
            font-size: 16px;
            transition: all 0.3s;
        }

        #login input:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }

        #login button {
            width: 100%;
            padding: 15px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 10px;
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
            transition: transform 0.2s;
        }

        #login button:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
        }

        /* 聊天页面 - 三栏布局 */
        #chat {
            background: white;
            border-radius: 20px;
            width: 95%;
            max-width: 1400px;
            height: 90vh;
            max-height: 800px;
            display: flex;
            flex-direction: row;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            animation: fadeIn 0.5s;
            overflow: hidden;
        }

        /* 左侧边栏 */
        #sidebar {
            width: 280px;
            background: #f8f9fa;
            border-radius: 20px 0 0 20px;
            display: flex;
            flex-direction: column;
            border-right: 1px solid #e0e0e0;
        }

        .sidebar-header {
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 20px 0 0 0;
        }

        .user-card {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .user-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: white;
            color: #667eea;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            font-weight: bold;
        }

        .user-details {
            flex: 1;
        }

        .user-name {
            color: white;
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 4px;
        }

        .user-status {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 12px;
            color: rgba(255,255,255,0.9);
        }

        .sidebar-section {
            padding: 15px;
            border-bottom: 1px solid #e0e0e0;
        }

        .section-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 13px;
            font-weight: bold;
            color: #666;
            margin-bottom: 10px;
        }

        .count-badge {
            background: #667eea;
            color: white;
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 11px;
        }

        .room-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: white;
            padding: 12px;
            border-radius: 8px;
        }

        .room-name {
            font-size: 16px;
            font-weight: bold;
            color: #667eea;
        }

        .btn-small {
            background: #667eea;
            color: white;
            border: none;
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .btn-small:hover {
            background: #5568d3;
            transform: translateY(-1px);
        }

        .online-users-list {
            max-height: 200px;
            overflow-y: auto;
        }

        .user-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px;
            background: white;
            border-radius: 6px;
            margin-bottom: 6px;
            cursor: pointer;
            transition: all 0.2s;
            position: relative;
        }

        .user-item:hover {
            background: #f0f0f0;
        }

        .user-item-actions {
            margin-left: auto;
            display: flex;
            gap: 5px;
        }

        .btn-add-friend, .btn-remove-friend {
            padding: 4px 8px;
            border: none;
            border-radius: 4px;
            font-size: 11px;
            cursor: pointer;
            transition: all 0.2s;
            font-weight: 600;
        }

        .btn-add-friend {
            background: #4caf50;
            color: white;
        }

        .btn-add-friend:hover {
            background: #45a049;
            transform: scale(1.05);
        }

        .btn-remove-friend {
            background: #f44336;
            color: white;
        }

        .btn-remove-friend:hover {
            background: #da190b;
            transform: scale(1.05);
        }

        .friends-list {
            max-height: 200px;
            overflow-y: auto;
        }

        .friend-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px;
            background: white;
            border-radius: 6px;
            margin-bottom: 6px;
            transition: all 0.2s;
            position: relative;
        }

        .friend-item:hover {
            background: #f0f0f0;
        }

        .friend-item-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: bold;
        }

        .friend-item-name {
            flex: 1;
            font-size: 14px;
            color: #333;
            cursor: pointer;
        }

        .friend-item-name:hover {
            color: #667eea;
        }

        .user-item-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: bold;
        }

        .user-item-name {
            flex: 1;
            font-size: 14px;
            color: #333;
        }

        .notifications-list {
            max-height: 150px;
            overflow-y: auto;
        }

        .notification-item {
            background: white;
            padding: 10px;
            border-radius: 6px;
            font-size: 12px;
            color: #666;
            margin-bottom: 6px;
            border-left: 3px solid #667eea;
        }

        .empty-state {
            text-align: center;
            color: #999;
            font-size: 12px;
            padding: 20px;
        }

        .sidebar-footer {
            padding: 15px;
            margin-top: auto;
        }

        .btn-logout {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 12px;
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            color: white;
            border: none;
            border-radius: 10px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .btn-logout:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(240, 147, 251, 0.3);
        }

        .btn-logout:active {
            transform: translateY(0);
        }

        /* 主聊天区域 */
        #main-chat {
            flex: 1;
            display: flex;
            flex-direction: column;
            background: white;
            border-radius: 0 20px 20px 0;
        }

        /* 标签页导航 */
        #chat-tabs {
            display: flex;
            background: #f8f9fa;
            padding: 10px 10px 0 10px;
            gap: 5px;
            border-bottom: 2px solid #e0e0e0;
            overflow-x: auto;
        }

        #chat-tabs::-webkit-scrollbar {
            height: 4px;
        }

        .chat-tab {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 12px 20px;
            background: white;
            border: 1px solid #e0e0e0;
            border-bottom: none;
            border-radius: 10px 10px 0 0;
            cursor: pointer;
            transition: all 0.3s;
            position: relative;
            min-width: 120px;
            white-space: nowrap;
        }

        .chat-tab:hover {
            background: #f0f0f0;
        }

        .chat-tab.active {
            background: white;
            border-color: #667eea;
            border-bottom: 2px solid white;
            margin-bottom: -2px;
            box-shadow: 0 -2px 10px rgba(102, 126, 234, 0.1);
        }

        .tab-icon {
            font-size: 18px;
        }

        .tab-name {
            font-size: 14px;
            font-weight: 500;
            color: #333;
        }

        .chat-tab.active .tab-name {
            color: #667eea;
            font-weight: bold;
        }

        .tab-close {
            margin-left: auto;
            color: #999;
            font-size: 16px;
            padding: 2px 6px;
            border-radius: 4px;
            transition: all 0.2s;
        }

        .tab-close:hover {
            background: #ff4444;
            color: white;
        }

        .unread-badge {
            background: #ff4444;
            color: white;
            font-size: 11px;
            padding: 2px 6px;
            border-radius: 10px;
            font-weight: bold;
            min-width: 18px;
            text-align: center;
        }

        /* 聊天内容区域 */
        #chat-content {
            flex: 1;
            position: relative;
            overflow: hidden;
        }

        .chat-area {
            display: none;
            flex-direction: column;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }

        .chat-area.active {
            display: flex;
        }

        .chat-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px;
        }

        .header-info h2 {
            font-size: 20px;
            margin-bottom: 4px;
        }

        .header-subtitle {
            font-size: 13px;
            opacity: 0.9;
        }

        .messages-container {
            flex: 1;
            overflow-y: auto;
            padding: 20px;
            background: #f5f5f5;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .chat-input {
            padding: 20px;
            background: white;
            border-top: 1px solid #e0e0e0;
        }

        /* 消息气泡 */
        .message {
            display: flex;
            align-items: flex-end;
            gap: 8px;
            animation: slideUp 0.3s;
        }

        .message.own {
            flex-direction: row-reverse;
        }

        .message-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 14px;
            flex-shrink: 0;
        }

        .message.own .message-avatar {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        }

        .message-content {
            max-width: 60%;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .message-sender {
            font-size: 12px;
            color: #666;
            padding: 0 8px;
        }

        .message.own .message-sender {
            text-align: right;
        }

        .message-bubble {
            padding: 12px 16px;
            border-radius: 18px;
            word-wrap: break-word;
            position: relative;
        }

        .message.own .message-bubble {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-bottom-right-radius: 4px;
        }

        .message.other .message-bubble {
            background: white;
            color: #333;
            border-bottom-left-radius: 4px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        .message-time {
            font-size: 10px;
            opacity: 0.6;
            padding: 0 8px;
        }

        .message.own .message-time {
            text-align: right;
        }

        /* 系统消息 */
        .message.system {
            align-self: center;
            flex-direction: column;
        }

        .message.system .message-bubble {
            background: rgba(0,0,0,0.05);
            color: #666;
            font-size: 12px;
            padding: 6px 12px;
            border-radius: 12px;
        }

        /* 私聊标记 */
        .private-badge {
            display: inline-block;
            background: #ff9800;
            color: white;
            font-size: 10px;
            padding: 2px 6px;
            border-radius: 4px;
            margin-left: 6px;
        }

        /* 输入区域 */
        #chat-input {
            padding: 20px;
            background: white;
            border-radius: 0 0 20px 0;
            border-top: 1px solid #e0e0e0;
        }

        .input-container {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .input-small {
            padding: 10px 12px;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            font-size: 13px;
            transition: all 0.3s;
        }

        .input-small:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }

        .input-main-row {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        #inputMsg {
            flex: 1;
            padding: 14px 16px;
            border: 2px solid #e0e0e0;
            border-radius: 12px;
            font-size: 15px;
            transition: all 0.3s;
        }

        #inputMsg:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
        }

        #sendBtn {
            padding: 14px 24px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 12px;
            font-size: 15px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        #sendBtn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
        }

        #sendBtn:active {
            transform: translateY(0);
        }

        .btn-icon {
            font-size: 18px;
        }

        .btn-text {
            font-size: 15px;
        }

        /* 滚动条美化 */
        #messages::-webkit-scrollbar {
            width: 6px;
        }

        #messages::-webkit-scrollbar-track {
            background: #f1f1f1;
        }

        #messages::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 3px;
        }

        #messages::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

        /* 动画 */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: scale(0.9);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* 连接状态指示器 */
        .status-indicator {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #4caf50;
            display: inline-block;
            margin-right: 5px;
            animation: pulse 2s infinite;
        }

        .status-indicator.disconnected {
            background: #f44336;
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }

        /* 欢迎消息 */
        .welcome-message {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 60px 20px;
            text-align: center;
            animation: fadeIn 0.5s;
        }

        .welcome-icon {
            font-size: 64px;
            margin-bottom: 20px;
            animation: bounce 1s ease-in-out infinite;
        }

        .welcome-title {
            font-size: 24px;
            font-weight: bold;
            color: #667eea;
            margin-bottom: 10px;
        }

        .welcome-subtitle {
            font-size: 16px;
            color: #999;
        }

        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }

        /* 输入焦点时的提示 */
        #inputMsg:focus::placeholder {
            color: #667eea;
        }
    </style>
</head>
<body>
    <!-- 登录页面 -->
    <div id="login">
        <h1>💬 WebSocket 聊天室</h1>
        <input id="username" placeholder="请输入您的昵称" autocomplete="off">
        <input id="roomId" placeholder="房间ID (默认: default)" value="default" autocomplete="off">
        <button id="btnLogin">进入聊天室</button>
    </div>

    <!-- 聊天页面 -->
    <div id="chat" style="display:none;">
        <!-- 左侧边栏 -->
        <div id="sidebar">
            <div class="sidebar-header">
                <div class="user-card">
                    <div class="user-avatar" id="sidebarAvatar">A</div>
                    <div class="user-details">
                        <div class="user-name" id="sidebarUsername">用户名</div>
                        <div class="user-status">
                            <span class="status-indicator" id="statusIndicator"></span>
                            <span id="statusText">已连接</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="sidebar-section">
                <div class="section-title">
                    <span>📍 当前房间</span>
                </div>
                <div class="room-info">
                    <div class="room-name" id="curRoom">default</div>
                    <button class="btn-small" id="btnSwitch">切换</button>
                </div>
            </div>

            <div class="sidebar-section">
                <div class="section-title">
                    <span>👥 在线用户</span>
                    <span class="count-badge" id="onlineCount">0</span>
                </div>
                <div id="onlineUsers" class="online-users-list">
                    <div class="empty-state">暂无其他用户</div>
                </div>
            </div>

            <div class="sidebar-section">
                <div class="section-title">
                    <span>💝 我的好友</span>
                    <span class="count-badge" id="friendCount">0</span>
                </div>
                <div id="friendsList" class="friends-list">
                    <div class="empty-state">暂无好友</div>
                </div>
            </div>

            <div class="sidebar-section">
                <div class="section-title">
                    <span>📢 系统通知</span>
                </div>
                <div id="systemNotifications" class="notifications-list">
                    <div class="notification-item">欢迎来到聊天室</div>
                </div>
            </div>

            <div class="sidebar-footer">
                <button class="btn-logout" id="btnLogout">
                    <span>🚪</span>
                    <span>退出登录</span>
                </button>
            </div>
        </div>

        <!-- 主聊天区域 -->
        <div id="main-chat">
            <!-- 标签页导航 -->
            <div id="chat-tabs">
                <div class="chat-tab active" data-chat-type="group" data-chat-id="group">
                    <span class="tab-icon">👥</span>
                    <span class="tab-name">群聊</span>
                    <span class="unread-badge" style="display:none;">0</span>
                </div>
            </div>

            <!-- 聊天内容区域 -->
            <div id="chat-content">
                <!-- 群聊区域 -->
                <div class="chat-area active" data-chat-id="group">
                    <div class="chat-header">
                        <div class="header-info">
                            <h2>💬 <span id="chatRoomName">default</span> 群聊</h2>
                            <div class="header-subtitle">所有人都能看到这里的消息</div>
                        </div>
                    </div>
                    
                    <div class="messages-container" id="messages-group"></div>
                    
                    <div class="chat-input">
                        <div class="input-container">
                            <div class="input-main-row">
                                <input class="message-input" placeholder="发送群聊消息... (按 Enter 发送)" autocomplete="off">
                                <button class="send-btn">
                                    <span class="btn-icon">📤</span>
                                    <span class="btn-text">发送</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="/chat.js"></script>
</body>
</html>
